<template>
    <div class="food-detail">
      <el-card class="box-card">
        <h3>食材详情</h3>
        <el-table :data="[food]" style="width: 100%">
          <el-table-column prop="food_id" label="ID" width="100" />
          <el-table-column prop="food_name" label="名称" width="120" />
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="calories" label="热量 (kcal)" width="120" />
          <el-table-column prop="protein" label="蛋白质 (g)" width="120" />
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue';
  import axios from 'axios';
  
  // 接收路由参数ID
  const props = defineProps(['id']);
  const food = ref(null);
  
  // 监听ID变化，查询数据
  watch(props.id, async (newId) => {
    if (newId) {
      const response = await axios.get(`http://localhost:8080/DietManagementSystem_war/admin/food/${newId}`);
      food.value = response.data;
    }
  });
  </script>
  
  <style scoped>
  .food-detail {
    padding: 20px;
  }
  .box-card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  </style>